<template>
<div class="adoptedInfo">
  <div class="adopted-info-form">
    <el-form ref="form" :model="model" :rules="rules">
      <el-descriptions :column="1" border>
        <el-descriptions-item>
          <template slot="label">
            物品种类
          </template>
          {{ getVarietyName(model.kind, model.variety) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            物品规格
          </template>
          {{ generateSpec() }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="is-required">物品编码</span>
          </template>
          <el-form-item prop="adoptedSn">
            <el-input v-model="model.adoptedSn" :maxlength="8" show-word-limit :disabled="!isEdit"></el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <span class="is-required">物品头像</span>
          </template>
          <el-form-item prop="avatarUrl">
            <y-upload-img
              :url="imgAry"
              value-type="ObjectArray"
              @update="updateModel"
              business-sys-module-code="ADOPTED_AVATAR"
              re-upload
              :disabled="!isEdit"
              :cropper-options="{
                /*autoCropWidth: 200,
                autoCropHeight: 200,*/
                fixedNumber: [1,1],
                full: false,
                fixed: true,
                centerBox: false
              }"
              :limit="1">
            </y-upload-img>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
  </div>
  <div class="adopted-info-buttons">
    <el-button type="primary" @click="saveInfo" v-if="isEdit">保存信息</el-button>
  </div>
</div>
</template>

<script>
export default {
  name: "adoptedInfo",
  props: {
    adoptedId: String,
    info: Object,
    isEdit: Boolean
  },
  inject: ['getVarietyName', 'refreshList'],
  computed: {
    imgAry(){
      if(!this.model.avatarUrl) return this.model.avatarUrl;
      return [{
        url: this.model.avatarUrl,
        id: this.model.avatarId
      }]
    },
  },
  data(){
    return{
      model:{
        /*adoptedSn: '',
        avatarId: '',
        avatarUrl: '',*/
      },
      specJson: '',
      rules: {
        adoptedSn: [
          {required: true, message: "请输入物品编码", trigger: "blur"},
          {
            validator: (rule, value, callback) => {
              if(!/^\d{8}$/.test(value)){
                callback(new Error('请输入8位数字'));
              }else{
                this.$$validateCode(
                  this.$api.adopted.validAdoptedSn,
                  {
                    adoptedId: this.adoptedId,
                    adoptedSn: value
                  }, callback);
              }
            },
            trigger: 'blur'
          }
        ],
        avatarUrl: [{required: true, message: "请上传物品头像", trigger: "change"}]
      }
    }
  },
  created(){
    this.initInfo();
  },
  methods:{
    initInfo(){
      Object.keys(this.info).map(key => {
        this.$set(this.model, key, this.info[key] || '')
      })
    },
    generateSpec(){
      if(!this.model.specJson) return '';
      else{
        let specJson = JSON.parse(this.model.specJson);
        let str = '';
        str += Object.values(specJson).join('；');
        return str;
      }
    },
    updateModel({type, file}){
      switch(type) {
        case 'delete': {
          this.model.avatarId = '';
          this.model.avatarUrl = '';
          break;
        }
        case 'edit': case 'add':{
          this.model.avatarId = file.id;
          this.model.avatarUrl = file.name;
          this.$refs['form'].validateField('avatarUrl');
          break;
        }
      }
    },
    saveInfo(){
      this.$refs['form'].validate(valid => {
        if(valid){
          console.log(this.model)
          this.$yAxios({
            url: this.$api.adopted.updateAdoptedInfo,
            data: Object.assign({
              adoptedId: this.adoptedId
            }, this.model),
            loading: true
          }, info => {
            this.$message({
              type: 'success',
              message: '保存成功'
            })
            this.refreshList();
          })
        }
      });
    }
  }
}
</script>

<style scoped lang="less">
.adoptedInfo{
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  .adopted-info-form{
    flex-grow: 2;
    margin-right: 10px;
    padding-right: 10px;
    //border-right: @common-border;
    span.is-required:before{
      content: '*';
      color: #F56C6C;
      margin-right: 4px;
    }
    /deep/ .el-descriptions-item__content{
      text-align: left;
    }
    /deep/ .el-form-item{
      margin: 0;
    }
    /deep/ .el-form-item__error{
      position: unset;
    }
  }
  >.adopted-info-buttons{
    flex-shrink: 0;
  }
}
</style>